<template>
  <ButtonGroup title="日期类型" :status="status[currentStatus].status">
    <el-select placeholder="日期选择" v-model="optionValue" style="width: 150px" @change="changeType">
      <el-option v-for="item in status" :key="item.value" :label="item.status" :value="item.value" />
    </el-select>
  </ButtonGroup>
</template>
<script setup>
import { inject, ref } from 'vue';
import ButtonGroup from './ButtonGroup.vue';
const props = defineProps({
  status: Array,
  configKey: String,
  currentStatus: Number,
});

const updateStatus = inject('updateStatus', () => {});
const optionValue = ref('');
const typeArr = props.status.map((item) => item.value);

function changeType(newVal) {
  if (updateStatus) {
    const payload = typeArr.indexOf(newVal);
    updateStatus(props.configKey, { value: payload, DateTime: true });
  } else {
    console.warn('updateStatus is not provided');
  }
}
</script>
